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EUNTML es mas una codificación que un lenguaje de programación. Su estructura es tan simple 
que cualquier persona sin principios en programación puede aprenderlo con gran facilidad. 








RA BASICA 

na > <HTMIL> > 
a <HEAD> 

<TITLE>Mi primera pagina web</TITLE> 

</HEAD> 

<BODY> Esta es mi primera página web- 

</BODY> 

ES 


La > 
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se debe modificar o digitar la estructura completa 

| del documento, y guardarlo como texto simple con ex- 
| tensión HTML. 

Para visualizar los cambios o ver como va quedando la 

página que se está elaborando, se puede abrir el ar- 

| chivo en cualquier navegador. Esto se puede hacer de 

-| la siguiente manera: 





>>» LA MARCA “BODY” 










e bio . file in a browser (Ctrl O). Para volver a cargar el 
archivo una vez que ya esté abierto, seleccionar el 

comando Reload del menú View. 

» Internet Explorer: Del menú Archivo (File), selec- 

cione el comando Abrir (Open). Para volver a cargar la 

página, seleccione el comando Actualizar (Refresh) del me- 

nú Ver (View). 




































El elemento <BODY> se coloca inmediatamente después del cierre de la mar- 
ca </HEAD> y, en cualquier caso, dentro de los elementos <HTML></HTML>. 
Tiene una marca de apertura y una de cierre, y delimitado por ellas figura el 
cuerpo del documento. 

Si el elemento <HEAD> contenía metainformación (es decir, datos no visua- 
lizados materialmente por el navegador), la función de la marca <BODY> es 
la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la pá- 
gina. La sintaxis correcta del elemento <BODY> es la siguiente: 


<BODY> 
Contenido del documento 
</BODY> 


La marca <BODY> se utiliza también para proporcionar al navegador infor- 
mación sobre la disposición de los objetos en el documento, así como para 
impostar varios atributos de visualización para el documento. Estos son: 


» BGCOLOR: Este atributo imposta un fondo de un solo color. La sintaxis co- 
rrecta es: <BODY BGCOLOR="red">. 

Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejem- 
plo, el color rojo (red) se sustituye de esta manera: 


<BODY BGCOLOR="+*ff0000">. 


La utilidad de los colores hexadecimales es mayor cuando no se desea un co- 
lor estándar sino tonalidades diversas o difuminadas. Los editores HTML de ma- 
yor difusión prevén paletas para la definición de los colores hexadecimales 
E “> BACKGROUND: Tiene una función 
similar a BGCOLOR, pero mientras 
el segundo muestra un tono único del 
color, este atributo primero visualiza 
en el fondo una imagen en formato 
gráfico .gif o pg. Por ejemplo, si se 
quiere construir un fondo con una 
imagen llamada sfondo.gif que se en- 
cuentra depositada en el mismo di- 
rectorio que el documento, la sintaxis 
correcta para impostar la imagen 
como fondo sería: 
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<BODY BACKGROUND="sfondo.gif">. 





El navegador visualiza la imagen sfondo.gif, y la repite en todos los puntos 
disponibles de la pantalla. En otras palabras, no se limita a visualizar la ima- 
gen una sola vez, en el centro de la página por ejemplo, sino que llena todo 
espacio a disposición. Por esta razón, es absolutamente necesario crear un 
fondo que, si viene repetido, no presente interrupciones sino un aspecto lo 
más uniforme posible. 

Es conveniente elegir una imagen de fondo que no dificulte la lectura y que 











se ajuste lo más posible al color del texto. Por [a 
ejemplo, un texto naranja sobre fondo rojo no 
podría leerse. Es siempre mejor usar el color ne- 
gro para el texto y tonos pastel para el fondo. 


» TEXT: Si no viene establecido, el color del 
texto del documento es negro, ya que los na- 
vegadores asignan este color por defecto. A 
través del atributo TEXT es posible asignar al 
texto un color distinto del negro. La sintaxis co- 
rrecta es: 


<BODY BACKGROUND="sfondo.gif” TEXT="red"> 


También en este caso los colores pueden expresarse con nombres o con valo- 
res hexadecimales. En el interior del documento se puede marcar parte del 
texto con colores diferentes del que se ha impostado en TEXT. 


»- LINK: Si no viene establecido, el color de los enlaces (que todavía no se han 
visitado) es el azul. Gracias al atributo LINK se pueden definir colores diferentes: 


<BODY BACKGROUND="sfondo.gif" LINK="red"> 


Todos los enlaces de la página no serán ya azules sino rojos (red). Este color 
puede expresarse en valores hexadecimales. 


» ALINK: Cuando hacemos clic en un enlace, este se vuelve de un color dis- 
tinto al impostado en LINK (o al azul de la opción por defecto). A través de 
ALINK (la A significa Active), es posible modificar este color: 


<BODY BACKGROUND="sfondo.gif” ALINK="yellow"> 


»- VLINK: Cuando se visita una dirección URL asociada a un enlace, este últi- 
mo se vuelve de un color distinto al de LINK (o al azul de la opción por de- 
fecto). Gracias a VLINK (la V significa Visited), es posible modificar este color: 


<BODY BACKGROUND="sfondo.gif” VLINK="green"> 


» BGPROPERTIES: Cuando se habló del atributo BACKGROUND se resaltó 
el hecho de que las imágenes estén dispuestas ocupando toda la pantalla 
disponible. Si la página fuera tan larga como para tener que activar la barra 
de desplazamiento lateral, el fondo (la imagen asociada) iría pasando junto 
con la página. A través de la propiedad BGPROPERTIES es posible hacer 
que el fondo permanezca inmóvil respecto al desplazamiento de página. 
La sintaxis correcta es: 


<BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed"> 


Esto funciona solo con Explorer y no con Netscape que, en cambio, conti- 
núa desplazando la página. 
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Como se ha mencionado, el HTML no distingue masa de un espacio entre caracteres, saltos de línea, negrilla, cursiva, tamaño y ti- 
po de fuente, viñetas, entre otras. Para lograr tales características en el texto del documento HTMIL (recordemos que el texto va den- 
tro del cuerpo del documento entre las etiquetas <BODY> </BODY>), se debe hacer uso de las etiquetas que se detallan a continuación. 








<> Texto en cuna Lea horzontal 


Preformateado <PRE> Texto que conserva todos sus espacios y tabu- 
ladores, y aparece en formato monoespaciado</PRE> 


“FONT” 





Esta es mi primera página Web 


LISTAS 











» Lista de definición: 


» Lista numerada: 


» Lista con viñetas: 








dla AGREGANDO IMÁGENES A SU PÁGINA 


Las págics en el Web deben esc heaza de rento por odos lados pues eto hace que los 
"somo resdado obecadrn ua página que arca es istada. aa. 


po 
ua exceloser combinación de colores de fondo y de ret, com ela de 
del detador. 
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Wimcalos de Hipertexto 
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» Vínculos externos hacia páginas cercanas: 
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Vinculos externos hacia págs cercanas 





» Vínculos internos — anclas: 
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“culos externos hacia páginas cercanas 
Resistro de Vistaptes 


A Ytncalos internos: asclas 


Cuzndo una página tieve vn gran contenido, es posible bacec que el usuario navegue a través de la página: Para 
[| cdo se debe marcar texto eligicio como el n del ancla 
l| Pera marcas el inicio del arca se utliza la etiqueta Tex: 
¿tros cesos el URL se ha cambiado por el nombre que 


in Nótese que lo que seria en los 


dido del signo E 


[| Para enarcas «lía del ancla (a donde debemos Eegar) se hace uso de la esiqueta Texto del ancia . Donde 
"sección" debe coinción con el nombre designado en el inicio del ancla. 


» Vínculos de correo electrónico: 





E nos casos URL ve ba canto por el ombre que seed dl aca pescó de po 


E] Paca marcar ln del ancla (a donde debemos Bega) se hace wo de la etiqueta Texto de ancla. Dore 
¿| sección” debe cocida con el nombre desiguado en eliñacio del acia. 


» Vínculos hacia otros recursos del web: 


FTP (archivo) ftp ://quién/dónde/que l 
tenet/quién | 











Aqui va el texto del to 
Prisera fla, primera columoa (Primera fla, segunda columna Primera Ma, tercera colunsa 
Segunda fla, primera columna Segunda fa, primera columns Segundo Él, pcimera columna 


| 
| 
: 
| 











dros de atención, entre otras. 


» Estructura básica de las tablas 





En general las tablas (conjunto rectan- 
gular de filas y columnas) pueden ser 
sin borde o con borde. La tabla sin 
borde es quizás la herramienta más útil 
en la codificación HTML, pues a través 
de ellas se puede organizar el docu- 
mento como se desee, teniendo en 
cuenta que HTML no entiende mas de 
un espacio, tabulador o salto de línea. 
Pero ¿por qué no hacerlo usando la 
etiqueta preformateado para arreglar 
la distribución del documento? Sen- 
cillo: como se sabe esta etiqueta des- 
pliega el texto en el tipo de letra mo- 


z | noespaciado, y no permite cambios ni 
de formar ni de tamaño. Conclusión; el documento se vería horrible. 
La tabla con borde es útil para desplegar tablas de contenido, resúmenes, cua- 


<TABLE BORDER=" Número entre O y 7"> 


<CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION> 
<TR> 

<TD>Primera fila, primera columna</TD> 

<TD>Primera fila, segunda columna</TD> 

<TD>Primera fila, tercera columna</TD> 

</TR> 

<TD>Segunda fila, primera columna</TD> 

<TD>Segunda fila, primera columna</TD> 

<TD>Segunda fila, primera columna</TD> 


etc... 
</TABLE> 


» Nota: El número que se designa en la etiqueta <TABLE BORDER="Núme- 
ro entre O y 7"> determina el ancho del borde de la tabla. Este número pue- 
de estar entre O y 7. En la etiqueta <CAPTION ALIGN=TOP ó BOTTOM> va 
el texto del título</CAPTION>; es decir, el título a la tabla, bien sea en la par- 
te superior (TOP), o en la parte inferior (BOTTOM). 





INTERFASE DE FORMAS HTML 








<form>... </form> 
<input> 

<select>... </select> 
<option> 
<textarea>...</textarea> 


<form>... </form>. 


¡ > Define una forma: <form>... 
</form> 


»» action: 


»» method: 


<form action="GrabaRegistro.asp” method=post>...</form> 


» Define un campo de entrada: <input> 


»» name 


»» value 


dd 


» Define un campo de selección: 
<select> ... </select> 


MES 


>» Size, 


>» multiple, 


» Define una opción en un campo de 
selección: option j 


Y: rad = 
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<Select multiple> 
<option>Manzanas 
<option selected>Plátanos 
<option>Cerezas 

ESC 


» Define un área de texto: <texta | 


rea>...texto por omisión ... </tex 
tarea> 


AO NENAS 





dd 


8palabra_clave; Muestra una letra en particular identificado por una palabra especial. Note que el punto y coma siguiendo a la 
palabra clave es requerido, y la palabra clave debe ser una de la lista presentada en: http://www.w3.org/MarkUp/html- 
spec/html-spec_13.html 

Ejemplos: 


¡ E0acute ) 
8.Ntilde; Ñ 8stequivalente_ascii; Usa literalmente un caracter ASCII. 


dd AA 








>» <HTML>: 


IND 


» <TITLE>: 


» DOCTYPE: 





